<template>
	<div class="hot">
		<div class="cw">
			<div class="hot-top">
				<h3 class="fl">热销产品</h3>
				<a class="fr" href="javascript:;">更多</a>
			</div>
			<div class="hot-content clearfix">
				<div class="hot-left fl">
					<img :src="hotBig.src" alt="" />
					<!--<div class="hot-big-tips">
						<h4 v-html='hotBig.title'></h4>
						<span v-html='hotBig.price'></span>
					</div>-->
				</div>
				<div class="hot-right fl">
					<ul class="clearfix">
						<li class="fl" v-for='(item,index) in hotList'>
							<img :src="item.src" alt="" />
							<div class="hot-tips">
								<h4 v-html='item.title'></h4>
								<span v-html='item.price'></span>
							</div>
							<a class="hot-buy" href="javascript:;">立即购买</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				hotBig:{
					src:'/src/assets/img/hot-big.jpg',
					title:'热销产品1',
					price:'99RMB'
				},
				hotList:[
					{
						src:'/src/assets/img/hot-1.jpg',
						title:'热销产品1',
						price:'99RMB'
					},
					{
						src:'/src/assets/img/hot-2.jpg',
						title:'热销产品2',
						price:'214RMB'
					},
					{
						src:'/src/assets/img/hot-3.jpg',
						title:'热销产品3',
						price:'299RMB'
					},
					{
						src:'/src/assets/img/hot-2.jpg',
						title:'热销产品4',
						price:'400RMB'
					},
					{
						src:'/src/assets/img/hot-3.jpg',
						title:'热销产品4',
						price:'400RMB'
					},
					{
						src:'/src/assets/img/hot-1.jpg',
						title:'热销产品4',
						price:'400RMB'
					}
				]
			}
		}
	}
		
</script>

<style scoped>
	.hot{
		height:500px;
		width:100%;
		margin-top:50px;
	}
	.hot-top{
		margin-top:40px;
		border-top:2px solid black;
		height:45px;
		background: black;
	}
	.hot-top h3,.hot-top a{
		line-height:43px;
		text-indent:10px;
		color:white;
	}
	.hot-left,.hot-left img{
		width:360px;
		height:428px;
	}
	.hot-content{
		margin-top:10px;
	}
	.hot-right{
		margin-left:20px;
		width:820px;
	}
	.hot-right li{
		width:210px;
		height:210px;
		position: relative;
		margin:2px 30px;
		text-align: center;
		border:1px solid lightgrey;
		overflow: hidden;
		cursor: pointer;
	}
	.hot-right li img{
		transition: .5s;
	}
	.hot-right li:hover img{
		transform:translateX(12px);
	}
	.hot-right li:hover .hot-buy{
		transform:translateX(65px);
	}
	.hot-tips{
		width:210px;
		height:25px;
		line-height:25px;
		position: absolute;
		left:0;
		bottom:0;
		background: rgba(0,0,0,.1);
	}
	.hot-tips h4{
		float: left;
		margin-left:10px;
	}
	.hot-tips span{
		float: right;
		margin-right:10px;;	
	}
	.hot-buy{
		position: absolute;
		left:-65px;
		top:0;
		width:65px;
		height:25px;
		line-height:25px;
		text-align: center;
		background: orangered;
		color:white;
		transition:.3s .2s;
	}
</style>